<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../_include/head.html',{
    "title":"申请审批",
    "filePath":"../.."
    })
    <link rel="stylesheet" href="../../css/examine.css">
</head>
<body class="iframe">
<!-- 审批类型 -->
<div class="layui-main x-frame2 x-query-head">
    <ul>
        <li onclick="app.reloadTable(1)">
            <img src="../../assets/images/my-application.png" alt="">
            <div class="query-head-title">
                <div id="apply1">0</div>
                <div>我发起的申请</div>
            </div>
        </li>
        <li onclick="app.reloadTable(2)">
            <img src="../../assets/images/apply-approve.png" alt="">
            <div class="query-head-title">
                <div id="apply2">0</div>
                <div>待审批的申请</div>
            </div>
        </li>
        <li onclick="app.reloadTable(3)">
            <img src="../../assets/images/applicated-approve.png" alt="">
            <div class="query-head-title">
                <div id="apply3">0</div>
                <div>已审批的申请</div>
            </div>
        </li>
    </ul>
</div>
<!-- 审批列表 -->
<div class="layui-main x-frame2 layui-collapse" lay-filter="collapsePanel" style="margin-top: 15px">
    <div class="layui-colla-item colla-off">
        <div class="layui-colla-title">侦查证列表<span class="layui-colla-subtitle"></span></div>
        <div class="layui-colla-content layui-show layui-colla-content-footer">
            <!--内容区域-->
            <table id="myTable" lay-filter="myTable"></table>
        </div>
    </div>
</div>
<!--详情弹框-->
<div id="popLayer" class="popform" style="display: none;"></div>
<!--同意/驳回弹窗-->
<div id="writeLayer" class="popform" style="display: none;">
    <form action="" class="layui-form" lay-filter="writeForm">
        <div class="layui-form-item" id="validDate">
            <label class="layui-form-label form-required" style="width:115px;float:left;">侦查证有效期</label>
            <div class="layui-input-block">
                <input type="text" name="yxsj" id="dateChioce" required lay-verify="isAgreeRequired"
                       placeholder="侦查证有效期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="returnReason">
            <label class="layui-form-label form-required">驳回原因</label>
            <div class="layui-input-block">
                <textarea name="bhyy" placeholder="请输入内容" required lay-verify="isReturnRequired"
                          style="min-height: 100px;" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input class="layui-btn" type="button" lay-submit lay-filter="saveWrite" value="保存">
            </div>
        </div>
    </form>
</div>
@@include('../_include/js.html',{
"filePath":"../.."
})
<script type="text/html" id="operateCol">
    <a class="x-operate-btn" lay-event="details">
        <i class="layui-icon">&#xe642;</i>详情</a>
    <a class="x-operate-btn" lay-event="agree">
        <i class="layui-icon">&#xe642;</i>同意</a>
    <a class="x-operate-btn" lay-event="disagree">
        <i class="layui-icon">&#xe640;</i>驳回</a>
</script>
<script>
    var tableHead = [
        {field: 'zczxxId', hide: true},
        {field: 'organnam', width: 100, title: '单位', align: 'center', templet: '#approvalStatus', unresize: true},
        {field: 'name', title: '姓名', align: 'center'},
        {
            field: 'xb', title: '性别', align: 'center', templet: function (d) {
                return d.xb === '1' ? '男' : d.xb === '0' ? '女' : ''
            }
        },
        {
            field: 'cssj', title: '出生时间', align: 'center', templet: function (d) {
                return new Date(d.cssj).toLocaleDateString()
            }
        },
        {field: 'jgzh', title: '军人证件号', align: 'center'},
        {field: 'zw', title: '职务', align: 'center'},
        {field: 'jx', title: '军衔', align: 'center'},
        {field: 'shr', title: '审核人', align: 'center'},
        {
            field: 'updatetime', title: '审核时间', align: 'center', sort: true, templet: function (d) {
                return new Date(d.updatetime).toLocaleDateString()
            }
        },
        {field: 'dqzt', title: '状态', align: 'center'},
        {field: 'operate', width: 200, title: '操作', align: 'center', toolbar: '#operateCol'},
    ]

    var app = {
        Table: layui.table,
        Laydate: layui.laydate,
        Layer: layui.layer,
        Form: layui.form,
        writeType: null,
        init() {
            this.renderData()
            this.renderTable()
            this.bindEvents()
        },
        /**
         * 渲染头部三大数据
         */
        renderData() {
            _fn.requestData('/zczhf/api/technological/applyList', {pageNum: 1, pageSize: 10, buttonFlag: 1}, {
                success: function (data) {
                    $('#apply1').html(data.data.total)
                }
            })
            _fn.requestData('/zczhf/api/technological/applyList', {pageNum: 1, pageSize: 10, buttonFlag: 2}, {
                success: function (data) {
                    $('#apply2').html(data.data.total)
                }
            })
            _fn.requestData('/zczhf/api/technological/applyList', {pageNum: 1, pageSize: 10, buttonFlag: 2}, {
                success: function (data) {
                    $('#apply3').html(data.data.total)
                }
            })
        },
        /**
         * 点击头部三大数据重载下面的列表
         */
        reloadTable(type) {
            this.Table.reload('myTable', {
                buttonFlag: type
            })
        },
        /**
         * 渲染表格
         */
        renderTable() {
            this.Table.render({
                id: 'myTable',
                elem: '#myTable',
                url: API_HOST + '/zczhf/api/technological/applyList', // 异步操作数据接口
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                headers: {
                    authorization: localStorage.getItem('authorization')
                },
                where: {buttonFlag: 1},
                method: 'POST',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                contentType: 'application/json',
                limit: 10,
                page: { //开启分页
                    theme: 'table',
                    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                    prev: '上一页',
                    next: '下一页'
                },
                height: 'full-100',
                cols: [tableHead]
            });

            this.Laydate.render({
                elem: '#dateChioce'
                , type: 'datetime'
                , range: true //或 range: '~' 来自定义分割字符
            });
        },
        bindEvents() {
            var _self = this;
            this.Table.on('tool(myTable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'details':
                        _self.Layer.open({
                            type: 2,
                            title: "查看详情",
                            content: 'details.html?zczxxid=' + data.zczxxId,
                            area: ['90%', '90%']
                        })
                        break;
                    case 'agree':
                        _self.writeType = 'agree'
                        $('#validDate').show()
                        $('#returnReason').hide()
                        _self.Form.val("writeForm", {
                            yxsj: '',
                            bhyy: ''
                        })
                        layer.open({
                            type: 1,
                            title: '同意审批',
                            content: $("#writeLayer"),
                            area: ['70%', '50%']
                        })
                        break;
                    case 'disagree':
                        _self.Form.val("writeForm", {
                            yxsj: '',
                            bhyy: ''
                        })
                        _self.writeType = 'disagree'
                        $('#validDate').hide()
                        $('#returnReason').show()
                        layer.open({
                            type: 1,
                            title: '驳回审批',
                            content: $("#writeLayer"),
                            area: ['70%', '50%']
                        })
                        break;
                }
            })

            this.Form.on('submit(saveWrite)', function (data) {
                if (data.field) {
                    _self.saveWrite(data.field)
                } else {
                    return null;
                }
            })

            this.Form.verify({
                isAgreeRequired: function (value) { //value：表单的值、item：表单的DOM对象
                    if ($("#validDate").is(":visible")) {
                        if (value.length === 0) {
                            return '必填项不能为空';
                        }
                    }
                },
                isReturnRequired: function (value) { //value：表单的值、item：表单的DOM对象
                    if ($("#returnReason").is(":visible")) {
                        if (value.length === 0) {
                            return '必填项不能为空';
                        }
                    }
                }
            });
        },
        /**
         * 同意/驳回
         */
        saveWrite(params) {
            var _self = this,
                data = {
                    applyFlag: 0,
                    zczxxid: params.zczxxId
                };

            if (this.writeType === 'agree') {
                data.applyFlag = 0
                data.yxsj = $('input[name=yxsj]').val()
            } else {
                data.applyFlag = 1
                data.bhyy = $('textarea[name=bhyy]').val()
            }

            _fn.requestData('/zczhf/api/technological/applyUpdateList', data, {
                success: function (data) {
                    if (data.code === 0) {
                        _self.showMessage('操作成功！', function () {
                            _self.reload();
                            _self.Layer.closeAll()
                        })
                    } else {
                        _self.showMessage(data.msg)
                    }
                }
            })
        },
        /**
         * 显示成功、失败信息
         * @param msg
         * @param callback
         */
        showMessage(msg, callback) {
            this.Layer.msg(msg, {time: 1000}, callback && callback());
        }
    };

    app.init();

</script>
</body>
</html>